Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Form pada Bootstrap

Form merupakan komponen penting dalam website yang digunakan untuk mengambil input dari pengguna, seperti login, registrasi, pencarian, atau input data lainnya. Bootstrap menyediakan berbagai class untuk membuat form yang rapi, konsisten, dan responsive tanpa perlu menulis CSS tambahan.

Dengan menggunakan Bootstrap, developer dapat membuat form dengan tampilan profesional dan mudah digunakan.

1. Struktur Form Bootstrap

Struktur dasar form pada Bootstrap menggunakan elemen <form> yang berisi berbagai input seperti text, select, checkbox, dan lainnya.

Contoh struktur dasar form:

 
<form>
<div class="mb-3">
<label class="form-label">Nama</label>
<input type="text" class="form-control" placeholder="Masukkan nama">
</div>

<button type="submit" class="btn btn-primary">Simpan</button>
</form>
 

Penjelasan:

  • form-control → digunakan untuk input agar memiliki style Bootstrap
  • form-label → label input
  • mb-3 → margin bawah agar rapi

2. Input Text

Input text digunakan untuk menerima data berupa teks seperti nama, email, atau password.

Contoh input text:

 
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="Masukkan email">
</div>

<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Masukkan password">
</div>
 

Bootstrap secara otomatis memberikan:

  • padding
  • border
  • tampilan yang rapi

3. Select Box

Select box digunakan untuk memilih satu opsi dari beberapa pilihan.

Contoh select box:

 
<div class="mb-3">
<label class="form-label">Pilih Jurusan</label>
<select class="form-select">
<option>Teknik Informatika</option>
<option>Sistem Informasi</option>
<option>Manajemen</option>
</select>
</div>
 

Penjelasan:

  • form-select → class Bootstrap untuk dropdown/select

4. Checkbox dan Radio Button

Checkbox

Checkbox digunakan untuk memilih lebih dari satu pilihan.

Contoh checkbox:

 
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Saya setuju</label>
</div>
 

Radio Button

Radio button digunakan untuk memilih satu pilihan dari beberapa opsi.

Contoh radio button:

 
<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Laki-laki</label>
</div>

<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Perempuan</label>
</div>
 

Penjelasan:

  • form-check → container checkbox/radio
  • form-check-input → input
  • form-check-label → label

5. Form Validation Sederhana

Validation digunakan untuk memastikan data yang dimasukkan pengguna sudah benar sebelum dikirim.

Bootstrap menyediakan class untuk menampilkan status valid atau tidak valid.

Contoh validasi sederhana:

 
<form class="needs-validation" novalidate>

<div class="mb-3">
<label class="form-label">Nama</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Nama wajib diisi!
</div>
</div>

<button class="btn btn-primary" type="submit">
Submit
</button>

</form>
 

Penjelasan:

  • required → field wajib diisi
  • invalid-feedback → pesan error
  • needs-validation → mengaktifkan validasi

Contoh script validasi:

 
<script>
(() => {
'use strict'
const forms = document.querySelectorAll('.needs-validation')

Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})();
</script>
 

Script ini akan menampilkan validasi ketika form disubmit.

Kesimpulan

Form pada Bootstrap memudahkan developer dalam membuat input data yang rapi dan responsive dengan berbagai komponen seperti input text, select box, checkbox, dan radio button. Selain itu, Bootstrap juga menyediakan fitur validasi sederhana untuk memastikan data yang dimasukkan pengguna sesuai dengan kebutuhan. Penguasaan form sangat penting karena hampir semua aplikasi web membutuhkan interaksi input dari pengguna.

Report Error